<template>
  <div class="PostDetailsPage" v-if="postUser">
    <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    >
      <template #title>
        <div style="position: absolute;top: 1vh;left: 40vw;">
          <van-image
              height="30px"
              round
              width="30px"
              :src="postUser.user.userAvatar"
          />
        </div>
        <div style="font-weight: bold;position: absolute;top: 1.5vh;">{{ postUser.user.userName }}</div>
      </template>
      <template #right>
        <van-popover v-model:show="showPopover" :actions="actions" @select="doSelect" placement="left-start" v-if="postUser.userId === currentUser.id">
          <template #reference>
            <van-icon name="ellipsis" size="large"></van-icon>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-swipe :autoplay="3000" lazy-render touchable width="100vw" height="40vh">
      <van-swipe-item v-for="image in photos" :key="image">
        <van-image width="100vw" height="40vh" :src="image"
                   @click="showPreview"
        />
      </van-swipe-item>
    </van-swipe>
    <div class="info">
      <div class="title">{{ postUser.title }}</div>
      <div class="time-update">{{ postUser.updateTime }}</div>
      <div class="content">{{ postUser.content }}</div>
    </div>
    <div class="footer">
          <span id="small-btn">
            <van-icon :name="postUser.hasThumb ? 'good-job' : 'good-job-o'" size="20"
                      @click="addThumb(postUser)">{{ postUser.thumbNum }}</van-icon>
          </span>
      <span id="small-btn">
            <van-icon name="other-pay" size="20"></van-icon>
          </span>
      <span id="small-btn">
            <van-icon :name="postUser.hasFavour ? 'star' : 'star-o'" size="20" @click="addFavour(postUser)"></van-icon>
          </span>
      <span id="small-btn">
            <van-icon name="share-o" size="20" @click="sendData"></van-icon>
          </span>
    </div>
    <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
    />
    <van-divider :style="{ borderColor: '#9b9694', padding: '0 16px',position: 'relative', top: '8vh'}"></van-divider>
    <div class="comment">
      <div class="comment-info">
        <span style="position: relative; left: 4vw; top: 2vh;color: #5a9bfa">|</span>
        <span style="position: relative; left: 5vw; top: 2vh;">评论</span>
      </div>
      <div class="comments">
        <p style="position: absolute;top: 8vh;left: 28%;color: #9b9694" v-if="replyList.length <= 0">
          快来发表你的评论吧！</p>
        <div style="position: relative;" v-else v-for="reply in replyList">
          <div>
            <div style="position: relative;top: 4vh;left: 4vw;width: 90vw">
              <van-image
                  height="40px"
                  round
                  width="40px"
                  :src="reply.user.userAvatar"
              />
            </div>
            <div style="font-weight: bold;position: absolute;top: 4vh;left: 16vw">{{ reply.user.userName }}</div>
            <div class="time-update" style="top: 1vh;left: 16vw">{{ reply.createTime }}</div>
            <div style="position: relative;top: 4vh;left: 16vw;font-weight: bold;width: 80vw;">
              {{reply.reply}}
            </div>
            <van-divider :style="{ borderColor: '#9b9694', padding: '0 16px',position: 'relative', top: '4vh'}"/>
          </div>
        </div>
        <div style="position: relative;height: 10vh"></div>
      </div>
    </div>
    <div class="comment-input">
      <input class="input" placeholder="说点什么吧..." v-model="commentValue"/>
      <van-button plain class="input-btn" @click="sendReply">发送</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import myAxios from "../../plugins/myAxios";
import {useRoute, useRouter} from "vue-router";
import {ImagePreview, Notify, Toast} from "vant";
import {getCurrentUser} from "../../services/user";

const postUser = ref();
const router = useRouter();
const replyList = ref([]);
const onClickLeft = () => history.back();
const showShare = ref(false)
const showPopover = ref(false)
const currentUser = ref();
const photos = ref([])
const commentValue = ref('')
const VanImagePreview = ImagePreview.Component;
const route = useRoute();

const actions = [
  {text: '编辑'},
  {text: '删除'}
]

const options = [
  [
    {name: '微信', icon: 'wechat'},
    {name: '朋友圈', icon: 'wechat-moments'},
    {name: '微博', icon: 'weibo'},
    {name: 'QQ', icon: 'qq'},
  ],
  [
    {name: '复制链接', icon: 'link'},
    {name: '分享海报', icon: 'poster'},
    {name: '二维码', icon: 'qrcode'},
    {name: '小程序码', icon: 'weapp-qrcode'},
  ],
];
onMounted(async () => {
  currentUser.value = await getCurrentUser();
  const res = await myAxios.get(`/post/get?id=${route.query.postId}`)
  if (res.code === 0) {
    postUser.value = res.data
    photos.value = JSON.parse(postUser.value.photos);
    postUser.value.updateTime = postUser.value.updateTime.split(' ')[0].replaceAll('-', '.');
  }
  const otherRes = await myAxios.get(`/post_reply/?id=${postUser.value.id}`)
  if (otherRes.code === 0) {
    replyList.value = otherRes.data
    replyList.value.map(item => {
      item.createTime = item.createTime.slice(0,16).replaceAll('-','.');
    })
  }
})

const showPreview = () => {
  ImagePreview(photos.value);
}

const addThumb = (post: Object) => {
  if (post.hasThumb) {
    post.thumbNum--
    post.hasThumb = false
  } else {
    post.thumbNum++
    post.hasThumb = true
  }

  myAxios.post('/post_thumb/', {
    postId: post.id
  })
}
const addFavour = (post: Object) => {
  if (post.hasFavour) {
    post.favourNum--
    post.hasFavour = false
  } else {
    post.favourNum++
    post.hasFavour = true
  }

  myAxios.post('/post_favour/', {
    postId: post.id
  })
}
const sendData = () => {
  showShare.value = true
}

const sendReply = async () => {
  const res = await myAxios.post('/post_reply/add', {
    postId: postUser.value.id,
    reply: commentValue.value,
  })
  if (res.code === 0) {
    Toast.success('发送成功');
    let replyTemp = {
      postId: postUser.value.id,
      reply: commentValue.value,
      user: currentUser.value
    }
    console.log(replyTemp)
    replyList.value.push(replyTemp)
    commentValue.value = '';
  }
}
const doSelect = async (action) => {
  if (action.text === '删除'){
    const res = await myAxios.post('/post/delete',{
      id: postUser.value.id
    })
    if (res.code === 0){
      router.back();
      Notify({type: 'success', message: '已删除'})
    }
  }
}

</script>

<style scoped>
.PostDetailsPage {
  position: absolute;
  width: 100vw;
}

.title {
  position: relative;
  top: 2vh;
  left: 5vw;
  font-weight: bold;
  font-size: 20px;
  width: 90vw;
}

.time-update {
  position: relative;
  top: 4vh;
  left: 5vw;
  font-size: 14px;
  color: #9b9694;
  width: 40vw;
}

.content {
  position: relative;
  top: 6vh;
  margin-left: 5vw;
  font-weight: bold;
  word-break: break-word;
  width: 90vw;
}

.footer {
  display: flex;
  width: 100%;
  height: 35px;
  position: relative;
  top: 10vh;
  justify-content: space-around;
}

.comment {
  position: relative;
  top: 6vh;
  height: 100vh;
}

.comment-input {
  position: fixed;
  top: 93vh;
  width: 100vw;
  background-color: white;
  height: 10vh;
}

.input {
  background-color: #eeeeee;
  height: 4vh;
  border: 0;
  border-radius: 30px;
  position: relative;
  left: 5vw;
  top: 1.5vh;
  width: 70vw;
  padding-left: 5vw;
}

.input::-webkit-input-placeholder {
  font-weight: bold;
  font-size: 12px;
}

.input-btn {
  height: 4vh;
  border: 0;
  border-radius: 30px;
  position: relative;
  left: 6vw;
  top: 1vh;
  color: #10aec2;
  font-weight: bold;
  font-size: 16px;
}
</style>